import { FC, useState } from 'react'

import { Button, Input, Modal, ModalProps } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import './index.scss'

interface Props extends ModalProps {
  onDataChange: (data: any) => void
}

// 输入 demo 入口
const InputDemoModal: FC<Props> = (props) => {
  const { open, onCancel, onDataChange } = props

  const [demoName, setDemoName] = useState('')
  const [textareaValue, setTextareaValue] = useState('')

  function handleSaveDemo() {
    localStorage.setItem(demoName, textareaValue)
    onDataChange(textareaValue)
  }

  function handleTextareaChange(event: any) {
    setTextareaValue(event.target.value)
  }

  return (
    <Modal title="输入案例" open={open} onCancel={onCancel}>
      <p className="inputDemoModal__p">
        规范：直接一行一行输入所有的值，值与值之间不需要使用空格，直接连着用就行，用空格来表示不填的内容
      </p>
      <TextArea onChange={handleTextareaChange} />
      案例名：
      <Input value={demoName} onChange={(e) => setDemoName(e.target.value)} />
      <Button onClick={handleSaveDemo}>保存案例</Button>
    </Modal>
  )
}

export default InputDemoModal
